<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>${obj.name }</title>
<link rel="shortcut icon" href="favicon.ico">
<!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->

<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>
<style type="text/css">
* {
	font-size: 14px;
}

.bgfont {
	font-size: 16px;
}
</style>



<script type="text/javascript"
	src="${path }/resource/plugin/api/AjaxProxyDemo.js"></script>


<!-- 界面单独引入的其他样式和脚本 -->
<script type="text/javascript"
	src="${path }/resource/plugin/syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
<script type="text/javascript"
	src="${path }/resource/plugin/syntaxhighlighter_3.0.83/scripts/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet"
	href="${path }/resource/plugin/syntaxhighlighter_3.0.83/styles/shCore.css" />
<link type="text/css" rel="stylesheet"
	href="${path }/resource/plugin/syntaxhighlighter_3.0.83/styles/shCoreDefault.css" />
<script type="text/javascript">
	SyntaxHighlighter.all();
</script>
<style type="text/css">
.hkdg {
	width: 100px;
	height: 100px;
	margin: 5px;
	border: 1px solid #aeaeae;
	border-radius: 5px;
	padding: 3px;
	margin: 5px;
}

blockquote {
	font-size: 14px;
	line-height: 25px;
}

.title {
	color: #6f5499;
	font-size: 32px;
	text-shadow: 2px 3px 2px #ababab;
}

.flow {
	position: fixed;
	top: 50px;
	width: 20%;
	left: 10px;
}
</style>
</head>
<!-- <pre class="brush: js;" id="exp" name="code">
					$.AjaxProxy({
						p:{name:"123"}
					}).invoke("",function(){
						console.log(1);
					} );
				</pre -->

<body class="gray-bg">
	<nav class="huiNav">
		<i class="fa fa-home"></i> 首页 <span>&gt;</span>系统js工具类<span>&gt;</span>AjaxProxy
		<a class="btn btn-info  btn-sm pull-right"
			href="javascript:location.replace(location.href);" title="刷新"><i
			class="fa fa-refresh"></i></a>
	</nav>




	<div class="row">
		<div class="col-sm-3 ">
			<div class="ibox float-e-margins flow">
				<div class="ibox-title">
					<h5>目录</h5>
				</div>
				<div class="ibox-content">
					<ul>
						<li><a href="#1F">介绍</a></li>
						<li><a href="#2F">基本使用</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="col-sm-8">

			<div class="row">
				<h2>
					<a class="title" name="1F">介绍</a>
				</h2>
				<hr>
				<p>
					&nbsp;&nbsp;&nbsp;&nbsp;
					<code>MGrid.js </code>
					是Matrix 框架的基础js工具之一，它是对装<a
						href="http://bootstrap-table.wenzhixin.net.cn/zh-cn/"
						target="_blank">bootstrap-table</a>的轻量级封装<br>
					1、对bootstrap-table的属性进行一些默认的配置，<br> 2、扩展了对搜索按钮、go按钮 <br>
					3、处理搜索表单的值添加到bootstrap-table 的默的queryParams中 <br>4、提供一些与表单相关的操作
				</p>
				<p>
					使用<code>MGrid.js </code>之前一定要自己去官方网站学会使用bootstrap-table
				</p>
				
				<br> <br>
			</div>



			<div class="row">
				<h2>
					<a class="title" name="2F">基本使用</a>
				</h2>
				<hr>
				<p>
					&nbsp;&nbsp;&nbsp;&nbsp; 我们用
					<code>MGrid.js </code>来做一个基础的数据表格显示
				</p>
				<h3 class="text-primary">示例一：</h3>
				<h3 class="text-primary">js代码如下：</h3>
				<pre class="brush: js;" id="exp" name="code">
					//初始化表格					
					var myGrid=MGrid.initGrid({
							 url:"${path}/admin/showList",  //数据加载地址
							 delUrl:"${path}/admin/del"  //数据删除地址
						 });
				</pre>
				<h3 class="text-primary">Html代码：</h3>
				<pre class="brush: js;" id="exp" name="code">
	&ltdiv class="ibox-content" &gt
		&ltdiv class="option-bar" &gt
			&ltbutton onclick="myGrid.delItems()" type="button" class="btn btn-danger btn-sm"&gt&lti class="fa fa-trash" &gt&lt/i&gt批量删除&lt/button&gt
		&lt/div&gt
		&lttable id="mgrid" &gt
			&ltthead&gt
				&lttr&gt
					&ltth data-checkbox="true"  &gt&lt/th&gt
					&ltth data-formatter="MGrid.indexfn" data-align="center"  data-width="30px" &gt序号&lt/th&gt
					&ltth data-field="name" &gt用户姓名&lt/th&gt
					&ltth data-field="email" &gtEmail&lt/th&gt
					&ltth data-field="account" &gt账号&lt/th&gt
					&ltth data-field="role.name" &gt角色&lt/th&gt
					&ltth data-field="registerTime" data-formatter="MGrid.getTime" data-sortable="true" &gt注册时间&lt/th&gt
				&lt/tr&gt
			&lt/thead&gt
		&lt/table&gt
	&lt/div&gt
</pre>
				
		</div>
	</div>
	<br>
	<br>
	<br>
	<p class="pull-right">
		Document By 姜友瑶 <br> 2016-9-27
	</p>
</body>
</html>